<!DOCTYPE html>
<html>
<head>
    <title>五子棋</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" type="text/css" href="css/index1.css">


</head>
<body>
<canvas id="chess" width="590px" height="590px"></canvas>
<div class="D1">
	<div class="btn">
<button class="back" onclick="goback()">返回</button>
<button class="again" onclick="SX()" type="reset" >重玩</button>
</div>
</div>
<script>
    function SX(){
        window.location.reload();
    }
</script>
<script src="js/jquery-3.5.1.js"></script>
<!--<script src="js/index1.js"></script>-->
<script>
    var chessBoard = [];
    var me=true;
    var over=false;

    //赢法数组
    var wins= [];

    //赢法的统计数组
    var myWin=[];
    var computerWin=[];

    for(var i=0;i<15;i++){
        chessBoard[i]=[];
        for(var j=0;j<15;j++){
            chessBoard[i][j]=0;
        }
    }
    for(var i=0;i<15;i++){
        wins[i]=[];
        for(var j=0;j<15;j++){
            wins[i][j]=[];
        }
    }
    var count=0;
    for(var i=0;i<15;i++){
        for(var j=0;j<11;j++){
            for(var k=0;k<5;k++){
                wins[i][j+k][count]=true;
            }
            count++;
        }
    }
    for(var i=0;i<15;i++){
        for(var j=0;j<11;j++){
            for(var k=0;k<5;k++){
                wins[k+j][i][count]=true;
            }
            count++;
        }
    }
    for(var i=0;i<11;i++){
        for(var j=0;j<11;j++){
            for(var k=0;k<5;k++){
                wins[i+k][j+k][count]=true;
            }
            count++;
        }
    }

    for(var i=0;i<11;i++){
        for(var j=14;j>3;j--){
            for(var k=0;k<5;k++){
                wins[i+k][j-k][count]=true;
            }
            count++;
        }
    }
    console.log(count);
    for(var i=0;i<count;i++){
        myWin[i]=0;
        computerWin[i]=0;
    }

    var chess=document.getElementById('chess');
    var context=chess.getContext('2d');

    context.strokeStyle='#000';

    var a1=new Image();
    a1.src="../img/a1.gif";
    a1.onload=function(){
        context.drawImage(a1,0,0,590,590);
        drawChessBoard();
    }
    var drawChessBoard=function(){
        for(var i=0;i<15;i++){
            context.moveTo(15 + i*40,15);
            context.lineTo(15 + i*40,575);
            context.stroke();
            context.moveTo(15,15 + i*40);
            context.lineTo(575,15 + i*40);
            context.stroke();
        }
    }
    var oneStep=function(i,j,me){
        context.beginPath();
        context.arc(15+i*40,15+j*40,13,0,2*Math.PI);
        context.closePath();
        var gradient=context.createRadialGradient(15+i*40+2,15+j*40-2,13,15+i*40+2,15+j*40-2,0);
        if(me){
            gradient.addColorStop(0,"#0A0A0A");
            gradient.addColorStop(1,"#636766");
        }else{
            gradient.addColorStop(0,"#D1D1D1");
            gradient.addColorStop(1,"#F9F9F9");
        }

        context.fillStyle=gradient;
        context.fill();
    }
    chess.onclick=function(e) {
        if (over) {
            return;
        }
        var x = e.offsetX;
        var y = e.offsetY;
        var i = Math.floor(x / 40);
        var j = Math.floor(y / 40);
        //if(chessBoard[i][j]==0){
        //    oneStep(i,j,me);
        //    if(me){
        //        chessBoard[i][j]=1;
        //    }else{
        //        chessBoard[i][j]=2;
        //    }
        //    me=!me;
//        for(var k=0;k<count;k++){
//            if(wins[i][j][k]){
//                myWin[k]++;
//                computerWin[k]=6;
//                if(myWin[k]==5){
//                    window.alert("你赢了")
//                    over=true;
//                }
//            }
//        }
//    }
//}
        if (chessBoard[i][j] == 0 && playernum == nowplayer ) {
            oneStep(i, j, me);
            if (me) {
                chessBoard[i][j] = 1;
            } else {
                chessBoard[i][j] = 2;
            }
            send()
            for (var k = 0; k < count; k++) {
                if (wins[i][j][k]) {
                    if (chessBoard[i][j] == 1) { //这个表示我方赢了 ? ? ?
                        myWin[k]++;
                        computerWin[k] = 6;
                        if (myWin[k] == 5) {
                            //window.alert("黑子赢了");
                            setTimeout(function(){
                                window.alert("黑子赢了");
                            },0);
                            over = true;
                        }
                    } else {
                        myWin[k] = 6;
                        computerWin[k]++;
                        if (computerWin[k] == 5) {
                            //window.alert("白子赢了");
                            setTimeout(function(){
                                window.alert("白子赢了");
                            },0);
                            over = true;
                        }
                    }
                }
            }
        }else {
            alert("还没轮到你");
        }
    }
    //点击返回主页
    function goback(){
        var back=confirm("是否返回主页面");
        if(back){
            window.location.href="../HTML/login.html"
        }else{
            alert("继续战斗吧")
        }
    }






    //棋局号
    var chessnum = 0;
    //棋手号
    var playernum;
    //当前下棋的人的棋手号
    var nowplayer = 0;
    //用户名字
    var s = sessionStorage.getItem("player");
    // alert(s);
    $(".welcome").text("欢迎："+s);

    var webSocket;
    var commWebSocket;
    if ("WebSocket" in window)
    {
        webSocket = new WebSocket("ws://localhost:8081/websocket2/"+s);

        //连通之后的回调事件
        webSocket.onopen = function(evt)
        {
            //webSocket.send( document.getElementById('username').value+"已经上线了");
            console.log("已经连通了websocket");
        };

        //接收后台服务端的消息
        webSocket.onmessage = function (evt)
        {
            var received_msg = evt.data;
            console.log("数据已接收:" +received_msg);
            var obj = JSON.parse(received_msg);
            console.log("可以解析成json:"+obj.messageType);
            //1代表上线 2代表下线 3代表在线名单 4代表普通消息
            if(obj.messageType==1){
                chessnum = obj.cn;
                console.log("棋局号"+chessnum);
                playernum = obj.playernum;
                console.log("棋手号"+playernum);
                if(playernum == 0){
                    me = true;
                }else{
                    me = false;
                }

            }
            else if(obj.messageType==2){
                let username = obj.username;
                alert("玩家"+username+"已退出 棋局结束");
                window.location.href = "index.html";
                //跳转到初始界面
            }
            else if(obj.messageType==3){

            }
            else{
                nowplayer = obj.nowplayer;
                console.log(nowplayer);
                // let chessbord1 = [];
                let cb = obj.chessBoard;
                console.log(cb);
                let a = [];
                a = cb.split("#");
                for(let l = 0; l < a.length; l++){
                    let split = [];
                    split = a[l].split(",");
                    for(let i = 0; i < split.length; i++){
                        chessBoard[l][i] = parseInt(split[i]);
                    }
                }
                // chessBoard = chessbord1;
                console.log(chessBoard);
                // chessBoard
            }
        };

        //连接关闭的回调事件
        webSocket.onclose = function()
        {
            console.log("连接已关闭...");
        };
    }
    else{
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }

    function closeWebSocket() {
        //直接关闭websocket的连接
        webSocket.close();
    }

    function send() {
        var x = convert(chessBoard);
        console.log(x)
        var message = {
            "chessnum": chessnum,
            "username":s,
            "chessBoard": x
        };
        console.log(message)
        webSocket.send(JSON.stringify(message));

    }

    function convert(chess){
        let m = chess[0];
        m+="#";
        for(let i = 1; i < chess.length; i ++){
            m+=chess[i];
            if(i != chess.length){
                m+="#";
            }
        }
        console.log(m);
        return m;

    }
</script>
</body>
</html>